<template>
    <div class="mypic_box">
        <div class="top">
            <span>我的收藏</span>
        </div>
        <div class="middle">
            <div class="left">
                <div class="left_top">
                    <span style="font-size: 0.4rem;font-family: '楷体';">分类</span>
                </div>
                <div class="item" :class="{ active: tempid == it.id }" @click="choose(it.id)" v-for="it in tabbat"
                    :key="it.id">
                    <span>{{ it.text }}</span>
                    <div>
                        <el-icon>
                            <ArrowRight size=".3667rem" />
                        </el-icon>
                    </div>
                </div>
            </div>
            <div class="right">
                <mylove :catagrea="catagrea"></mylove>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
// getlove

import { ArrowRight } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue';
import mylove from '@/components/mylove/index.vue'
let tempid = ref(0)
let tabbat = reactive<any>([
    { text: '全部', id: 0 }, { text: '头像', id: 1 }, { text: '手机壁纸', id: 2 }, { text: '电脑壁纸', id: 3 }, { text: '萌宠', id: 4 }
])
let catagrea = ref(0)
const choose = (e: number) => {
    tempid.value = e
    switch (e) {
        case 0:

            catagrea.value = 0
            break;
        case 1:

            catagrea.value = 1
            break
        case 2:

            catagrea.value = 2
            break;
        case 3:

            catagrea.value = 3

            break;
        case 4:
            catagrea.value = 4

    }

}
</script>

<style lang="scss" scoped>
.mypic_box {

    .top {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 5vh;
        background-color: #20B2AA;
        font-size: .4rem;
        font-family: '楷体';
    }

    .middle {
        display: flex;


        .left {
            flex: 2;


            .send {
                cursor: pointer;
                margin-left: 1rem;
                margin-top: 1.333rem;
                width: 1.3333rem;
                height: 1.333rem;
                background-color: #A8DADC;
                border-radius: 100%;
                text-align: center;
                line-height: 1.333rem;
                font-size: .3rem;
                font-family: '楷体';
            }

            background-color: #7F7F7F;
            height: 95vh;


            .item {

                padding: .0667rem;
                margin-top: .1333rem;
                font-family: '楷体';
                align-items: center;
                font-size: 0.293rem;
                display: flex;
                justify-content: space-between;
                cursor: pointer;

                &.active {
                    background-color: #9b9b9b;
                }
            }

            .left_top {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 0.6rem;
                border-bottom: .0267rem solid #eee;
            }
        }

        .right {

            flex: 11;
            background-color: #e8f5e9;

        }
    }
}
</style>